<template>
  <div class='recruitManage' >
    <el-row class='first-title'>
      <div class="lf">
        <h3 class="">{{searchDeptCategory}}</h3>
      </div>
    </el-row>
    <el-row class="second-sec">
      <el-tabs v-model="tabActiveName">
        <el-tab-pane label="发布招聘" name="issue">
          <div class="issuePart">
            <div class="notice-title">
              <el-form class="recruitForm" :model="recruitForm" label-width='70px'>
                <el-row :gutter="20">
                  <el-col :span='12'>
                    <el-form-item label="岗位" class='titleItem'>
                      <el-input v-model="recruitForm.post_name" placeholder="请输入岗位"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='12'>
                    <el-form-item label="所属部门" class='titleItem'>
                      <el-select
                        v-model="recruitForm.dept_name"
                        placeholder="请选择部门"
                        filterable>
                        <el-option
                          v-for="deptItem in deptList"
                          :key="deptItem.name"
                          :label="deptItem.name"
                          :value="deptItem.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>  
                </el-row>
                <el-row :gutter="20">
                  <el-col :span='8'>
                    <el-form-item label="职业类别" class='titleItem'>
                      <el-input v-model="recruitForm.category" placeholder="请输入职业类别"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='8'>
                    <el-form-item label="教育程度" class='titleItem'>
                      <el-input v-model="recruitForm.educational" placeholder="请输入教育程度"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='8'>
                    <el-form-item label="工作地区" class='titleItem'>
                      <el-input v-model="recruitForm.recruit_address" placeholder="请输入工作地区"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span='8'>
                    <el-form-item label="薪资待遇" class='titleItem'>
                      <el-input v-model="recruitForm.salary" placeholder="请输入薪资待遇"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='8'>
                    <el-form-item label="工作年限" class='titleItem'>
                      <el-input v-model="recruitForm.work_life" placeholder="请输入工作年限"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='8'>
                    <el-form-item label="人数" class='titleItem'>
                      <el-input v-model="recruitForm.recruit_num" placeholder="请输入人数"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="岗位职责" class='titleItem'>
                  <el-input
                    type="textarea"
                    :autosize="{minRows: 4}"
                    placeholder="请输入内容"
                    v-model="recruitForm.work_duty">
                  </el-input>
                </el-form-item>
                <el-form-item label="任职要求" class='titleItem'>
                  <el-input
                    type="textarea"
                    :autosize="{minRows: 4}"
                    placeholder="请输入内容"
                    v-model="recruitForm.job_require">
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmitRecruitForm">提交</el-button>
                  <el-button @click="onCancelRecruitForm">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="管理招聘" name="manage">
          <div class="managePart">
            <el-table
              :data="formatRecruitData"
              border
              style="width: 100%">
              <el-table-column
                type="expand">
                <template slot-scope="props">
                  <ul class="detailUl">
                    <li class="detailLi">
                      <div class="detailTitle">{{props.row.post_name}}</div>
                      <div class="detailCont">
                        <p>所属部门： {{props.row.dept_name}}</p>
                        <p>职业类别： {{props.row.category}}</p>
                        <p>教育程度： {{props.row.educational}}</p>
                        <p>工作年限： {{props.row.work_life}}</p>
                        <p>工作地区： {{props.row.recruit_address}}</p>
                        <p>薪资待遇： {{props.row.salary}}</p>
                      </div>
                    </li>
                    <li class="detailLi">
                      <div class="detailTitle">岗位职责</div>
                      <div class="detailCont">{{props.row.work_duty}}</div>
                    </li>
                    <li class="detailLi">
                      <div class="detailTitle">任职要求</div>
                      <div class="detailCont">{{props.row.job_require}}</div>
                    </li>
                  </ul>
                </template>
              </el-table-column>
              <el-table-column
                v-for="item in tableColumn"
                :key="item.prop"
                :prop="item.prop"
                :label="item.label"
                :width="item.width">
              </el-table-column>
              <el-table-column
                label="操作"
                width="100">
                <template scope="scope">
                  <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button
                    class="dangerBt"
                    @click="deleteClick(scope.row)"
                    type="text"
                    size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="paginationDiv">
              <my-pagination
                :sizeChange='handleSizeChange'
                :currentChange='handleCurrentChange'
                :totals='pagination.total'>
              </my-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-dialog
      title="编辑"
      :visible.sync="editDialogVisible"
      width="30%"
      :lock-scroll='false'>
      <div>
        <el-form class="recruitEditForm" :model="recruitEditForm" label-width='70px'>
          <el-row :gutter="20">
            <el-col :span='12'>
              <el-form-item label="岗位" class='titleItem'>
                <el-input v-model="recruitEditForm.post_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="所属部门" class='titleItem'>
                <el-select
                  v-model="recruitEditForm.dept_name"
                  placeholder="请选择部门">
                  <el-option
                    v-for="deptEditItem in deptEditList"
                    :key="deptEditItem.name"
                    :label="deptEditItem.name"
                    :value="deptEditItem.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>  
          </el-row>
          <el-row :gutter="20">
            <el-col :span='12'>
              <el-form-item label="职业类别" class='titleItem'>
                <el-input v-model="recruitEditForm.category"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="教育程度" class='titleItem'>
                <el-input v-model="recruitEditForm.educational"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span='12'>
              <el-form-item label="工作地区" class='titleItem'>
                <el-input v-model="recruitEditForm.recruit_address"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="薪资待遇" class='titleItem'>
                <el-input v-model="recruitEditForm.salary"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span='12'>
              <el-form-item label="工作年限" class='titleItem'>
                <el-input v-model="recruitEditForm.work_life"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="人数" class='titleItem'>
                <el-input v-model="recruitEditForm.recruit_num"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="岗位职责" class='titleItem'>
            <el-input
              type="textarea"
              :autosize="{minRows: 4}"
              placeholder="请输入内容"
              v-model="recruitEditForm.work_duty">
            </el-input>
          </el-form-item>
          <el-form-item label="任职要求" class='titleItem'>
            <el-input
              type="textarea"
              :autosize="{minRows: 4}"
              placeholder="请输入内容"
              v-model="recruitEditForm.job_require">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editRecruit">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="deleteDialogVisible"
      width="20%"
      :lock-scroll='false'>
      <div class="deleteModalCont">
        确定要删除吗?
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteRecruit">确 定</el-button>
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Message, Select,Option,Input, Col, Row,Tabs,TabPane,Table,TableColumn,Pagination,Dialog} from 'element-ui'
  import myPagination from '@/components/public/pagination'

  // Vue.use(Message)
  Vue.use(Select)
  Vue.use(Option)
  Vue.use(Input)
  // Vue.use(checkbox)
  // Vue.use(DatePicker)
  Vue.use(Col)
  Vue.use(Row)
  Vue.use(Tabs)
  Vue.use(TabPane)
  Vue.use(Table)
  Vue.use(TableColumn)
  Vue.use(Pagination)
  Vue.use(Dialog)
  // import cardLeader from '@/components/public/card-memeber'
  // import searchBox from '@/components/public/search-box'
  // import searchCol from '@/components/public/selectShowCol'
    export default {
      data() {
        return {
          searchDeptCategory:'招聘管理',
          tabActiveName: 'issue',
          deptList: [{name:'招商总部',value:'招商总部'}],
          deptEditList: [{name:'招商总部',value:'招商总部'}],
          recruitForm: {
            post_name: '',
            dept_name: '',
            recruit_num: '',
            recruit_address:'',
            salary: '',
            category: '',
            educational: '',
            work_life: '',
            work_duty: '',
            job_require: ''
          },
          recruitEditForm: {
            post_name: '',
            dept_name: '',
            recruit_num: '',
            recruit_address:'',
            salary: '',
            category: '',
            educational: '',
            work_life: '',
            work_duty: '',
            job_require: '',
            id:''
          },
          tableColumn: [
            {
              prop: 'post_name',
              label: '职位名称',
              width: '180'
            },
            {
              prop: 'dept_name',
              label: '所属部门',
              width: ''
            },
            {
              prop: 'recruit_num',
              label: '人数',
              width: '80'
            },
            {
              prop: 'recruit_address',
              label: '工作地区',
              width: '120'
            },
            {
              prop: 'release_date',
              label: '发布日期',
              width: '120'
            }
          ],
          formatRecruitData:[],
          rowData:{},
          pagination:{
            pageNum:1,
            pageSize: 10,
            total:0
          },
          editDialogVisible: false,
          deleteDialogVisible: false
        }
      },
      methods: {
        formatTableData:function(data){
          for(var i=0; i<data.length; i++){
            data[i].release_date = data[i].release_date.split(' ')[0]
          }
          return data
        },
        clearFormData:function(f){
          for(var key in f){
            f[key] = ''
          }
        },
        getAllDept:function(){
          this.PostAjax('/announcement/getDeptListByUserId',null,this.getAllDeptCB)
        },
        getAllDeptCB:function(data){
          console.log('getAllDeptCB',data)
        },
        getRecruitData:function(){
          var obj = {
            pageNum:this.pagination.pageNum,
            pageSize: this.pagination.pageSize
          }
          this.PostAjax('/announcement/recruitMoreList',obj,this.getRecruitDataCB)
        },
        getRecruitDataCB:function(data){
          this.pagination.total=data.data.total
          this.formatRecruitData=this.formatTableData(data.data.datas);
        },
        onSubmitRecruitForm:function(e){
          var obj = {
            postName:this.recruitForm.post_name,
            deptName:this.recruitForm.dept_name,
            recruitNum:this.recruitForm.recruit_num,
            recruitAddress:this.recruitForm.recruit_address,
            salary:this.recruitForm.salary,
            category:this.recruitForm.category,
            educational:this.recruitForm.educational,
            workLife:this.recruitForm.work_life,
            workDuty:this.recruitForm.work_duty,
            jobRequire:this.recruitForm.job_require
          }
          this.PostAjax('/announcement/saveRecruitInfo',obj,this.submitRecruitFormCB)
        },
        submitRecruitFormCB:function(data){
          if (data.data.status === 1) {
            Message.success('发布成功!')
            this.clearFormData(this.recruitForm)
            this.tabActiveName = 'manage'
            this.getRecruitData()
          }else{
            Message.error('发布失败!')
          }
        },
        onCancelRecruitForm:function(){
          for(var key in this.recruitForm){
            this.recruitForm[key]=''
          }
        },
        PostAjax:function(url,params,callback){
          var self = this;
          this.Axios.Post(url,params).then(function(res){
            if(callback){
              callback(res,self)
            }
          })
        },
        editClick:function(row){
          this.editDialogVisible=true;
          this.recruitEditForm=JSON.parse(JSON.stringify(row))
        },
        editRecruit:function(e){
          var obj = {
            postName:this.recruitEditForm.post_name,
            deptName:this.recruitEditForm.dept_name,
            recruitNum:this.recruitEditForm.recruit_num,
            recruitAddress:this.recruitEditForm.recruit_address,
            salary:this.recruitEditForm.salary,
            category:this.recruitEditForm.category,
            educational:this.recruitEditForm.educational,
            workLife:this.recruitEditForm.work_life,
            workDuty:this.recruitEditForm.work_duty,
            jobRequire:this.recruitEditForm.job_require,
            id:this.recruitEditForm.id
          }
          this.PostAjax('/announcement/saveRecruitInfo',obj,this.editRecruitCB)
        },
        editRecruitCB:function(data){
          if (data.data.status === 1) {
            Message.success('修改成功!')
            this.editDialogVisible=false;
            this.getRecruitData()
          }else{
            Message.error('修改失败!')
          }
        },
        deleteClick:function(row){
          this.deleteDialogVisible=true;
          this.rowData=JSON.parse(JSON.stringify(row))
        },
        deleteRecruit:function(){
          this.PostAjax('/announcement/deleteRecruit',{id:''+this.rowData.id},this.deleteRecruitCB)
        },
        deleteRecruitCB:function(data){
          if (data.data.status === 1) {
            Message.success('删除成功!')
            this.deleteDialogVisible=false;
            this.getRecruitData()
          }else{
            Message.error('删除失败!')
          }
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.pagination.pageSize=val
          this.getRecruitData()
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.pagination.pageNum=val
          this.getRecruitData()
        }
      },
      created:function(){
      },
      mounted: function () {
        this.getAllDept()
        this.getRecruitData()
      },
      beforeDestroy: function () {
        window.removeEventListener("scroll",this.scrollFunc);
      },
      components: {
        myPagination
      },
      watch:{
      },
      filters:{
      }
    }
</script>

<style scoped>
  .recruitManage .dangerBt{
    color: #ff4949;
  }
  .recruitManage .dangerBt:hover{
    color: #ff6d6d;
  }
  .recruitManage .first-title h3{
      font-size: 24px;
      margin-top: 20px;
      margin-bottom: 20px;
      font-weight: 500;
      line-height: 1.1;
  }
  .recruitManage .first-title h3 small{
    font-size: 65%;
    font-weight: normal;
    line-height: 1;
    color: #777;
    margin-left:5px;
  }
  .recruitManage .second-sec{
      position: relative;
      border-radius: 3px;
      background: #ffffff;
      border-top: 3px solid #d2d6de;
      margin-bottom: 20px;
      width: 100%;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      border-top-color: #00a65a;
      min-height: 420px;
  }
  .recruitManage .issuePart, .recruitManage .managePart{
    padding: 20px;
  }
  .recruitManage .notice-title{
    border-bottom: 1px solid #f4f4f4;
    padding:10px;
    overflow: hidden;
  }
  .recruitManage .sendBt{
    text-align: center;
    padding: 10px 0;
  }
  .recruitManage .detailUl{
    padding: 10px 0 10px 50px;
  }
  .recruitManage .detailLi{
    overflow: hidden;
    padding: 20px 0;
  }
  .recruitManage .detailTitle{
    width: 120px;
    float: left;
    font-weight: bold;
  }
  .recruitManage .detailCont{
    margin-left: 150px;
  }
  .recruitManage .paginationDiv{
    padding: 10px 0;
    margin-top: 20px;
  }
  .recruitManage .deleteModalCont{
    padding-left: 30px;
  }
</style>
<style>
  /*修改element-ui样式*/
  .recruitManage .recruitForm .el-form-item__label {
    text-align:right;
  }
  .recruitManage .notice-title .titleItem .el-input{
    width:150px;
  }
</style>
